<template>
	<view class="plr-20">
		<view class="u-cb-white-bg padding-30 mt-20 u-flex u-flex-between u-flex-items-center">
			<view class="u-flex u-flex-items-center">
				<u-avatar
					:text="form.FAname"
					fontSize="24"
					size="60"
					randomBgColor>
				</u-avatar>
				<view class="ml-20 lh-40">
					<view class="">{{form.user_name}}</view>
					<view class="">{{form.phone}}</view>
				</view>
			</view>
			<view class="">
				<u-button text="退出登录" type="error" @click="loginOut"/>
			</view>
		</view>
		<view class="u-cb-white-bg plr-30 mt-20">
			<u-form
				:model="form"
				:rules="rules"
				ref="uForm"
				:errorType="['toast']"
				labelWidth="100">
				<u-form-item label="会员姓名" prop="user_name" borderBottom>
					<u-input
						placeholder="请输入会员名称"
						inputAlign="right"
						v-model="form.user_name"
						border="none">
					</u-input>
				</u-form-item>
				<u-form-item label="手机号码" prop="phone" borderBottom>
					<u-input
						placeholder="请输入手机号码"
						inputAlign="right"
						type="number"
						v-model="form.phone"
						border="none">
					</u-input>
				</u-form-item>
				<u-form-item label="会员性别" prop="user_sex" borderBottom>
					<view class="u-flex u-flex-end">
						<view class="ml-20 width-120" v-for="(item, index) in sexList" :key="item.value">
							<u-tag :type="form.user_sex===item.value?'error':'info'" :text="item.sex" size="medium" :name="item.value" @click="onCheckBoxClick"/>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="会员生日" prop="birthday">
						<uni-datetime-picker v-model="form.birthday" type="date" end="2022-08-17">
							<view class="u-text-align-right">
								<text v-show="form.birthday!==''">{{form.birthday}}</text>
								<text class="u-placeholder-color" v-show="form.birthday==''">请选择时间</text>
							</view>
						</uni-datetime-picker>
				</u-form-item>
			</u-form>
		</view>
		<view class="u-cb-white-bg mt-20">
			<u-cell-group :border="false">
				<u-cell title="修改密码" :isLink="true" :border="false" @click="$u.route('/pages/login/setpw',{type:2})"/>
			</u-cell-group>
		</view>
		<view class="bottom-btn">
			<u-button type="error" text="完成" @click="onClickSetMMData"/>
		</view>
	</view>
</template>

<script>
	import {mapState, mapMutations} from 'vuex'
	export default{
		data(){
			return {
				sexList:[
					{sex:'男', value: 0},{sex:'女', value: 1}
				],
				form: {
					user_name:'',
					phone:'',
					user_sex: 0,
					birthday: ''
				},
				rules:[]
			}
		},
		onLoad() {
			this.getUInfo()
		},
		methods: {
			...mapMutations(['logout']),
			getUInfo(){
				this.$reqGet('GetUserInfo',{
					type: 2
				}).then(res=>{
					this.form = {
						FAname: res.Data.FName.substring(0, 1),
						user_name:res.Data.FName,
						FNumber: res.Data.FNumber,
						phone:res.Data.FPhone,
						user_sex: res.Data.FSexId,
						birthday: res.Data.FBirthday.substring(10, 0)
					}
				})
			},
			loginOut(){
				let that = this
				const accountInfo = uni.getAccountInfoSync();
				uni.login({
					provider: 'weixin',
					success: function (loginRes){
						that.$reqGet('/OnUserlogout', {
							type: 2,
							appid: accountInfo.miniProgram.appId,
							code: loginRes.code
						}).then(res=>{
							that.logout()
							uni.$u.route('/pages/login/index')
						})
					}
				})
			},
			onCheckBoxClick(val){
				this.form.user_sex = val
			},
			onClickConfirm(date){
				this.form.birthday = date
			},
			onClickSetMMData(){
				this.$reqPost('/SetMemberModify', this.form).then(res=>{
					this.getUInfo()
				})
			}
		}
	}
</script>

<style scoped leng="scss">
	.bottom-btn{
		width: 710upx;
		position:fixed;
		bottom: env(safe-area-inset-bottom); 
		left: 20upx;
	}
</style>